<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画</title>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script>
			$(function(){
				$("#b1").click(function(){
					$("#adv").hide(3000,"linear",function(){alert("图片没有了");});
				});
				$("#b2").click(function(){
					$("#adv").show(4000,"linear");
				});
				
				$("#b3").click(function(){
					$("#adv").fadeOut(4000,"linear");
				});
				
				$("#b4").click(function(){
					$("#adv").fadeIn(4000,"linear");
				});
				
				$("#b5").click(function(){
					$("#adv").slideDown(4000);
				});
				
				$("#b6").click(function(){
					$("#adv").slideUp(4000,"linear");
				});
				$("#b7").click(function(){
					$("#adv").animate({"width":"0px"},1200);
				});
			});
		</script>
	</head>
	<body>
		<div id="adv">
			<img src="../img/spring.jpg" />
		</div>
		<p>
			<input type="button" value="隐藏图片" id="b1" /> 
			<input type="button" value="显示图片" id="b2" />
			
			<input type="button" value="淡出图片" id="b3" />
			<input type="button" value="淡入图片" id="b4" />
			
			<input type="button" value="滑出图片" id="b5" />
			<input type="button" value="滑入图片" id="b6" />
			
			<input type="button" value="自定义图片消失效果，宽度不断变化" id="b7" />
		</p>
	</body>
</html>
